<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片区 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary">添加用户</el-button>
				</el-col>
			</el-row>
			<!-- 角色列表 -->
			<el-table :data="tableData" style="width: 100%" border stripe>
				<!-- 展开列 -->
				<el-table-column width="50" type="expand">
					<template v-slot="scope">
						<el-row v-for="(item,index) in scope.row.children" :key="item.id"
							:class="['bdbottom',index === 0 ?'bdtop':'','vcenter']">
							<!-- 渲染一级权限 -->
							<el-col :span="5">
								<el-tag   closable @close="removesanrights(scope.row,item.id)">{{item.rolename}}</el-tag>
								<i class="el-icon-caret-right"></i>
							</el-col>
							<!-- 渲染二级和三级权限 -->
							<el-col :span="15">
								<!-- 通过for循环，嵌套渲染二级权限 -->
								<el-row v-for="(items,indexs) in item.children" :key="items.id"
									:class="[indexs === 0 ?'':'bdtop','vcenter']">
									<!-- 二级权限 -->
									<el-col :span="6">
										<el-tag type="success" closable @close="removesanrights(scope.row,items.id)">{{items.rolename}}</el-tag>
										<i class="el-icon-caret-right"></i>
									</el-col>
									<!-- 三级权限 -->
									<el-col :span="18">
										<el-tag type="warning" v-for="(itemes,index) in items.children"
											:key="itemes.id"   closable @close="removesanrights(scope.row,itemes.id)">
											{{itemes.rolename}}
										</el-tag>
									</el-col>
								</el-row>
							</el-col>
						</el-row>



					</template>
				</el-table-column>
				<!-- 索引列 -->
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="rolename" label="角色名称"></el-table-column>
				<el-table-column prop="roledescribe" label="角色描述"></el-table-column>
				<el-table-column label="操作" width="180">
					<template v-slot="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini"
							@click="removeroleuser(scope.row.id)">
						</el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

		</el-card>






	</div>
</template>

<script>
	export default {
		data() {
			return {
				//权限列表
				tableData: [{
						id: 70,
						rolename: '主管',
						roledescribe: '技术负责人',
						children: [{
							id: 80,
							rolename: '商品管理',
							roledescribe: '商品管理内容',
							children: [{
								id: 800,
								rolename: '商品列表',
								roledescribe: '商品列表内容',
								children: [{
									id: 8000,
									rolename: '添加商品',
									roledescribe: '添加商品内容',
								}, {
									id: 8001,
									rolename: '删除商品',
									roledescribe: '删除商品内容',
								}, {
									id: 8002,
									rolename: '统计商品',
									roledescribe: '统计商品内容',
								}, {
									id: 8003,
									rolename: '删除商品',
									roledescribe: '删除商品内容',
								}, {
									id: 8004,
									rolename: '统计商品',
									roledescribe: '统计商品内容',
								}, {
									id: 8005,
									rolename: '删除商品',
									roledescribe: '删除商品内容',
								}, {
									id: 8006,
									rolename: '统计商品',
									roledescribe: '统计商品内容',
								}]
							}]
						}, {
							id: 81,
							rolename: '权限管理',
							roledescribe: '权限管理内容',
						}]
					}, {
						id: 71,
						rolename: '会计',
						roledescribe: '会计负责人',
					}, {
						id: 72,
						rolename: '部门经理',
						roledescribe: '部门负责人',
						children: [{
							id: 82,
							rolename: '商品管理',
							roledescribe: '商品管理内容',
							children: [{
								id: 802,
								rolename: '商品列表',
								roledescribe: '商品列表内容',
								children: [{
									id: 8001,
									rolename: '添加商品',
									roledescribe: '添加商品内容',
								}, {
									id: 8002,
									rolename: '删除商品',
									roledescribe: '删除商品内容',
								}, {
									id: 8003,
									rolename: '统计商品',
									roledescribe: '统计商品内容',
								}]
							}]
						}]
					}, {
						id: 73,
						rolename: '前端部门主管',
						roledescribe: '前端部门负责人',
					}, {
						id: 74,
						rolename: '后端部门主管',
						roledescribe: '后端部门负责人',
					}, {
						id: 75,
						rolename: 'UI部门主管',
						roledescribe: 'UI部门负责人',
					}, {
						id: 76,
						rolename: '测试员1',
						roledescribe: '1111',
					}, {
						id: 77,
						rolename: '测试员2',
						roledescribe: '222',
					},


				],

			}
		},
		created() {

		},
		methods: {
			//删除权限
			removeroleuser(id) {
				consol.log(id)
			},
			// 根据id删除下拉框的权限
			async removesanrights(role,roleid){
				console.log(role.id,roleid)
				// 弹框询问用户是否删除数据
				// console.log(id) 获取到了id,根据接口删除数据
				const confirmresult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch((err)=>{
					return err
				})
				// 如果用户确认删除，返回值为confirm 点击取消返回值为cancel
				console.log(confirmresult)
				if(confirmresult == 'confirm'){
					//调用删除接口
					return this.$message.success('删除成功')
				}else{
					return this.$message.info('已取消删除')
				}
				
				// this.方法名    不建议
				
				//这个更简单便捷
				role.children = res.data
			},
			
			
			
		}
	}
</script>

<style>
	.el-card {
		margin-top: 15px;
	}

	.el-table {
		margin-top: 15px;
	}

	.el-tag {
		margin: 7px;

	}

	.bdtop {
		border-top: 1px solid #eee;
	}

	.bdbottom {
		border-bottom: 1px solid #eee;
	}
	.vcenter{
		display: flex;
		align-items: center;
	}
</style>
